{% extends 'template/base.html' %}

{% block head %}
    {{ super() }}
    <title>零食上新</title>
{% endblock %}

{% block body %}

    {% include 'template/admin-header.html' %}

    <div class="container">

        {#        <div>{{ get_flashed_messages() }}</div>#}

        <h1 style="margin-bottom: 50px">修改商品信息</h1>

        <form class="form-horizontal" action="" method="post">

            <input type="text" hidden name="img" value="{{ form.data.img | d('', true) }}">

            <div class="form-group" style="display: flex;justify-content: flex-start;align-items: center">
                <label style="margin-top: 0" class="col-sm-2 control-label">图片</label>
                {#                <div class="col-xs-8">#}
                <button type="button" id="upload" class="layui-btn layui-btn-primary"
                        style="margin-left: 20px;margin-right: 20px">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
                <img id="icon" style="height: 80px;width: 80px;"
                     src="{{ url_for('static', filename='upload/' + form.data.img) | d('#') }}" alt="">
                <span style="text-align: left;color: red;"> {{ form_errors.img | join('，') }} </span>
                <script>
                  {#$('#icon').hide()#}
                  layui.use('upload', function () {
                    var upload = layui.upload

                    //执行实例
                    var uploadInst = upload.render({
                      elem: '#upload'
                      , url: '{{ url_for('file_upload_ep') }}' //上传接口
                      , done: function (res) {
                        //上传完毕回调
                        const {data, code} = res
                        if (!code) {
                          $('#icon').attr('src', '{{ url_for('static', filename='upload/') }}' + data)
                          $('input[name=img]').attr('value', data)
                          console.log('{{ url_for('static', filename='upload/') }}' + data)
                        }
                      }
                      , error: function () {
                        //请求异常回调
                        console.log('上传文件失败')
                      }
                    })
                  })
                </script>
                {#                </div>#}
            </div>

            <div class="form-group">
                <label style="margin-top: 0" class="col-sm-2 control-label">名字</label>
                <div class="col-xs-8">
                    <input type="text" class="form-control" name="name" value="{{ form.data.name | d('', true) }}"/>
                    <div style="text-align: left;color: red;"> {{ form_errors.name | join('，') }} </div>

                </div>
            </div>

            <div class="form-group">
                <label style="margin-top: 0" class="col-sm-2 control-label">单价</label>
                <div class="col-xs-8">
                    <input type="text" class="form-control" name="price" value="{{ form.data.price | d('', true) }}"/>
                    <div style="text-align: left;color: red;"> {{ form_errors.price | join('，') }} </div>

                </div>
            </div>

            <div class="form-group">
                <label style="margin-top: 0" class="col-sm-2 control-label">库存</label>
                <div class="col-xs-8">
                    <input type="text" class="form-control" name="reserve"
                           value="{{ form.data.reserve | d('', true) }}"/>
                    <div style="text-align: left;color: red;"> {{ form_errors.reserve | join('，') }} </div>

                </div>
            </div>

            <div style="color: red;">{{ messages | join('，') }}</div>


            <p class="but">
                <button type="submit" class="btn btn-default" style="width: 120px;">提交</button>
            </p>

        </form>

    </div>


{% endblock %}